<template>
  <div class="layer">
    <back title="layer组件"></back>

    <btn @click.native="layer1">信息框</btn>
    <btn @click.native="layer2">询问框</btn>
    <btn @click.native="layer3">简单提示</btn>
    <btn @click.native="loading">显示loading</btn>
  </div>
</template>

<script>
  export default {
    name: 'layer',
    data () {
      return{
        
      }
    },
    methods:{
      layer1(){
        layer.open({
          content: '信息提示哦'
          ,btn: '确定'
          ,yes:()=>{
            alert('点击确定了')
            layer.close()
          }
        })
      },
      layer2(){
        layer.open({
          content: '您确定要刷新一下本页面吗？'
          ,btn: ['刷新', '不要']
          ,yes: function(){
            location.reload()
          }
        })
      },
      layer3(){
        alert('简单提示')
      },
      loading(){
        this.$loading.show()
        setTimeout(()=>{
          this.$loading.hide()
        },2000)
      }
    },
    mounted(){
      
    }
  }
</script>

<style lang="less" scoped>
  .btn{margin: 10px auto;width: 90% !important;display: block;}
</style>